<template>
	<view class="">
		<view class="position-relative" style="height: 6800rpx;">
			<view class="w-100 position-absolute" style="z-index: 10;margin-bottom: 400rpx;">
				<image :src="Domain_ICON+'/ysgx.webp'" mode="widthFix" class="img"></image>
				<view class="position-absolute w-100" style="bottom: 0;height: 180rpx;">
				</view>
			</view>
			<!-- 商品信息 -->
			<view class="position-absolute" style="margin-left: 67rpx; z-index: 20; top:1300rpx;width: 83%;">
				<view class="mb-2" @click="productClick(item)" v-for="(item,index) in ysgxList.slice(0,3)" :key="index"
					style="height: 340rpx;">
				</view>
				<view class="flex w-100 flex-wrap " style="justify-content: space-evenly;">
					<!-- 第一个橱窗 -->
					<view class="mt-1 mb-2" @click="productClick(item)" v-for="(item,index) in ysgxList.slice(3,5)"
						:key="index" style="width: 45%; height: 330rpx;">
					</view>
					<view class="mt-1 mb-2" @click="productClick(item)" v-for="(item,index) in ysgxList.slice(5,9)"
						:key="index" style="width: 45%; height: 300rpx;">
					</view>
					<!-- 调整位置的空块 -->
					<view class="w-100" style="height: 75rpx;">
					</view>
					<!-- 第二个橱窗 -->
					<view class="mb-2" @click="productClick(item)" v-for="(item,index) in ysgxList.slice(9,11)"
						:key="index" style="width: 45%; height: 330rpx;">
					</view>
					<view class="mb-2" @click="productClick(item)" v-for="(item,index) in ysgxList.slice(11,15)"
						:key="index" style="width: 45%; height: 300rpx;">
					</view>
					<!-- 调整位置的空块 -->
					<view class="w-100" style="height: 73rpx;">
					</view>
					<!-- 第三个橱窗 -->
					<view class="mb-2" @click="productClick(item)" v-for="(item,index) in ysgxList.slice(15,17)"
						:key="index" style="width: 45%; height: 330rpx;">
					</view>
					<view class="mt-1 mb-2" @click="productClick(item)" v-for="(item,index) in ysgxList.slice(17,21)"
						:key="index" style="width: 45%; height: 300rpx;">
					</view>
				</view>
			</view>
			<view class="w-100 position-absolute" style="z-index: 50; bottom: 0;">
				<botSponsor bgHeight="280rpx"></botSponsor>
			</view>
		</view>
		<view class="position-fixed fixed-bottom" style="height: 110rpx;z-index: 100;">
			<tabsBottom></tabsBottom>
		</view>
	</view>
</template>

<script>
	const app = getApp();
	import tabsBottom from "@/components/tabs/tabs-bottom.vue";
	import botSponsor from "@/components/botsponsor/sponsor.vue"
	import {
		getJsonInquiry
	} from '@/api/global.js'
	import {
		getWX2GoodsIdAction
	} from "@/api/index.js"
	export default {
		components: {
			tabsBottom,
			botSponsor
		},
		data() {
			return {
				ysgxList: [],
				Domain_ICON: app.globalData.Domain_ICON,
			}
		},
		onLoad(option) {
			//console.log(option);
			// this.getData('hmgx/gxyysgx.json')
			if (option.hasOwnProperty('ShopColumn_Id')) {
				this.getWX2GoodsIdAction(option.ShopColumn_Id)
			}
		},
		methods: {
			async getWX2GoodsIdAction(ShopColumn_Id) {
				const res = await getWX2GoodsIdAction({
					ShopColumn_Id,
					Open_ID: app.globalData.Open_ID,
					page: 1,
					limit: 25
				})
				//console.log(res);
				if (res.Status == "success") {
					this.ysgxList = res.tableData;
					this.ysgxList.reverse();
				}
				//console.log(this.ysgxList, '商品');
			},
			// async getData(File){
			// 	const res = await getJsonInquiry({File})
			// 	if(res.Status == 'success'){
			// 		this.ysgxList =  JSON.parse(res.Data) 
			// 	}
			// 	//console.log(this.ysgxList)
			// },
			// 点击商品,进入商品详情页
			productClick(item) {
				uni.navigateTo({
					url: "/pages/index/productDetails?name=" + item.Article_Name + "&Article_SerialNumber=" +
						item.Article_SerialNumber + "&Sales_Unit_Price_SerialNumber=" + item
						.Sales_Unit_Price_SerialNumber +
						"&Store_SerialNumber=" + item.Store_SerialNumber+'&ShopColumn_Id=' + item.ShopColumn_Id
				})
			},
		}
	}
</script>

<style>
</style>